<template>
	<view>
		<navbar></navbar>
		<view v-if="detail.goods_id" class="container">
			<view class="header">
				<view class="media-box">
					<three :src="detail.goods_image" v-if="isGLB"></three>
					<view class="media" v-else>
						<view class="media-img-wrapper">
							<image mode="aspectFill" :src="detail.goods_image"></image>
						</view>
					</view>
				</view>
				<!-- 底盘隐藏 -->
				<view v-if="false" class="booth">
					<!-- <view class="goods__share">
						<form @submit="onClickShare">
							<button formType="submit" class="btn-normal dis-flex flex-center">
								<text class="share__icon dy-iconfont icon-share col-f"></text>
							</button>
						</form>
					</view> -->
					<!-- 藏品名称 -->
					<view class="goods-title dis-flex flex-center">
						<image class="flex-fixed" src="https://qiniu.wiod.cn/alc/left5.png" mode="">
						</image>
						<text class="title col-f f-30 f-bold onelist-hidden--s">{{ detail.goods_name }}</text>
						<image class="flex-fixed" src="https://qiniu.wiod.cn/alc/right5.png" mode="">
						</image>
					</view>
					<view class="assets__no-wrapper m-top30 t-c">
						<view class="assets__no">
							<text>{{ detail.sort_no }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="content b-f">
				<!-- 藏品标题信息 -->
				<view class="title-box">
					<view class="top">
						<view class="price">
							￥<span>{{ detail.sale_price }}</span>
						</view>
					</view>
					<view class="bottom">
						<view class="title">
							{{ detail.goods_name}}
						</view>
						<view></view>
						<view class="flex">
							<view class="tag-box">
								<span class="tag-title">限量</span>
								<span class="tag-num">{{ detail.total_num }}</span>
							</view>
							<view class="tag-box">
								<span class="tag-title">流通</span>
								<span class="tag-num">{{ detail.market_num }}</span>
							</view>
						</view>
					</view>
				</view>
				<!-- 发行方 持有者 -->
				<view class="content-component">
					<view class="introduction">
						<view class="introduction-item">
							<view class="title">发行方</view>
							<view class="info">
								<!-- <image class="info-img" :src="detail.publisher.logo"></image> -->
								<view class="info-name">{{ detail.publisher_name }}</view>
							</view>
						</view>
						<view class="introduction-item">
							<view class="title">持有者</view>
							<view class="info">
								<image class="info-img" :src="detail.avatarUrl"></image>
								<view class="info-name">{{ detail.nickName }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="content-component">
					<view class="component-title">拥有者信息</view>
					<view class="component-content">
						<view class="owner dis-flex flex-y-center">
							<view class="owner__avatar">
								<image src="https://qiniu.wiod.cn/alc%2F80b07864b41d1a0946df9aed1f7d0742_20220606140140f08df6546.png" mode="aspectFill"></image>
							</view>
							<view class="owner-info m-left40">
								<view class="owner__name content-value f-32">{{ detail.nickName }}</view>
								<view class="content-key m-top20 col-6 f-28">拥有者</view>
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="content-component">
					<view class="component-title">技术信息</view>
					<view class="component-content f-28">
						<view class="dis-flex flex-x-between">
							<view class="content-key col-9">数字藏品ID</view>
							<view>{{ detail.nft_key }}</view>
						</view>
						<view class="m-top20 dis-flex flex-x-between">
							<view class="content-key col-9">藏品哈希值</view>
							<view>--</view>
						</view>
						<view class="m-top20 dis-flex flex-x-between">
							<view class="content-key col-9">所属链</view>
							<view>百度链</view>
						</view>
					</view>
				</view> -->
				<view class="content-component">
					<view class="component-title">藏品信息</view>
					<view class="component-content f-28 collection-info">
						<!-- <view class="dis-flex">
							<view class="content-key col-9">转入时间</view>
							<view class="content-value">{{ detail.update_time }}</view>
						</view> -->
						<view class="m-top20 dis-flex">
							<view class="content-key col-9">发行数量</view>
							<view class="content-value">{{ detail.total_num }}</view>
						</view>
						<view class="m-top20 dis-flex">
							<view class="content-key col-9">发行方</view>
							<view class="content-value">{{ detail.publisher_name }}</view>
						</view>
						<view class="m-top20 dis-flex">
							<view class="content-key col-9">流通数</view>
							<view class="content-value">{{ detail.market_num }}</view>
						</view>
						<view class="m-top20 dis-flex">
							<view class="content-key col-9">数字藏品ID</view>
							<view class="content-value">{{ detail.nft_key }}</view>
						</view>
						<view class="m-top20">
							<view class="content-key col-9">藏品说明</view>
							<view class="dy-lineheight">
								<mp-html :content="nft_intro"></mp-html>
							</view>
						</view>
					</view>
				</view>
				<view class="content-component">
					<view class="component-title">发行方介绍</view>
					<view class="component-content">
						<view class="dy-lineheight">
							<mp-html :content="publisher_detail"></mp-html>
						</view>
					</view>
				</view>
				<view class="content-component">
					<view class="component-title">购买须知</view>
					<view class="component-content">
						<view class="dy-lineheight f-28">
							数字藏品为用户寄售藏品，仅限实名认证十八岁周岁及以上的用户购买，该数字藏品版权归发行方或者创作者所有。数字藏品为用户寄售藏品，仅限实名认证十八岁周岁及以上的用户购买，该数字藏品版权归发行方或者创作者所有。数字藏品为用户寄售藏品，仅限实名认证十八岁周岁及以上的用户购买，请谨慎购买！
						</view>
					</view>
				</view>
			</view>
			<!-- 底部操作栏 -->
			<bottom-placeholder></bottom-placeholder>
			<view v-if="0 == detail.user_login_status || 0 == detail.address_status || 1 == detail.have_no_pay_order || (!detail.is_open_sande && !detail.is_open_lianlian)"
				class="perfect-tips-placeholder">
			</view>
			<view class="footer-fixed f-30">
				<!-- 登录和实名tips -->
				<view
					v-if="0 == detail.user_login_status || 0 == detail.address_status || 1 == detail.have_no_pay_order || (!detail.is_open_sande && !detail.is_open_lianlian)"
					class="perfect-tips">
					<navigator v-if="0 == detail.user_login_status" url="/pages/login/login" hover-class="none"
						class="perfect-tips-container dis-flex flex-x-between flex-y-center f-28">
						<view class="perfect-tips__title col-f"><text class="m-right10">*</text>您还未登录账号，暂无法操作</view>
						<view class="btn-perfect dis-flex flex-y-center">
							<text>去登录</text>
							<text class="dy-iconfont icon-youjiantou f-36"></text>
						</view>
					</navigator>
					
					<navigator v-else-if="0 == detail.address_status" url="/pages/user/address/index" hover-class="none"
						class="perfect-tips-container dis-flex flex-x-between flex-y-center f-28">
						<view class="perfect-tips__title col-f"><text class="m-right10">*</text>您还未实名认证，暂无法操作</view>
						<view class="btn-perfect dis-flex flex-y-center">
							<text>去认证</text>
							<text class="dy-iconfont icon-youjiantou f-36"></text>
						</view>
					</navigator>
					<view v-else-if="!detail.is_open_sande && !detail.is_open_lianlian" @tap.stop.prevent="sande()" hover-class="none"
						class="perfect-tips-container dis-flex flex-x-between flex-y-center f-28">
						<view class="perfect-tips__title col-f"><text class="m-right10">*</text>您还未开户，暂无法操作</view>
						<view class="btn-perfect dis-flex flex-y-center">
							<text>去开户</text>
							<text class="dy-iconfont icon-youjiantou f-36"></text>
						</view>
					</view>
					<navigator v-else-if="1 == detail.have_no_pay_order" url="/pages/order/index?type=payment"
						hover-class="none" class="perfect-tips-container dis-flex flex-x-between flex-y-center f-28">
						<view class="perfect-tips__title col-f"><text class="m-right10">*</text>您当前有待付款订单，若超时将自动取消
						</view>
						<view class="btn-perfect dis-flex flex-y-center">
							<text>去付款</text>
							<text class="dy-iconfont icon-youjiantou f-36"></text>
						</view>
					</navigator>
				</view>
				<view v-if="10 == detail.status.value"
					class="footer-fixed-container dis-flex flex-x-between flex-y-center">
					<view class="dis-flex flex-y-baseline">
						<view v-if="0 == detail.sale_price" class="col-f f-36">免费</view>
						<view v-else class="col-f f-36">￥{{ detail.sale_price }}</view>
					</view>
					<button class="btn-normal btn-purchase" @tap.stop.prevent="onPurchase" :disabled="purchaseDisabled">
						点击购买
					</button>
				</view>
				<view v-else class="footer-fixed-container dis-flex flex-center f-28">
					<view class="col-f">当前藏品已售罄</view>
				</view>
			</view>
		</view>

		<!-- 分享海报 -->
		<action-share-poster v-model="shareActionsheetVisible" :goods-id="detail.goods_id"></action-share-poster>
	</view>
</template>

<script>
	const app = getApp();
	import navbar from "@/components/navbar/navbar";
	import actionSharePoster from "@/components/poster/actionSharePoster";
	import bottomPlaceholder from '@/components/bottom-placeholder/index';
	import zanActionsheet from "@/components/actionsheet/index";
	import three from "@/components/three/index";
	export default {
		components: {
			navbar,
			actionSharePoster,
			bottomPlaceholder,
			zanActionsheet,
			three
		},

		data() {
			return {
				detail: {
					status: {
						value: 0
					}
				},
				// 分享海报底部菜单
				shareActionsheetVisible: false,
				forceDisabled: false,
			}
		},
		computed: {
			sande(){
				uni.navigateTo({
					url: '/pages/user/account/account'
				})
				// app._post_form('user/getSanDeWallet', {}, function(result) {
				// 	console.log(result)
				// 	if (1 == result.code) {
				// 		app.navigationTo(result.data.pay_url)
				// 	}else{
				// 		app.showError(result.msg);
				// 	}
				// }, null, function() {
				// 	// 解除按钮禁用
				// 	app.showError(result.msg);
				// });
			},
			// 购买可点按钮状态	
			purchaseDisabled: function() {
				return (0 == this.detail.active_status ||
					0 == this.detail.user_login_status ||
					0 == this.detail.address_status ||
					(!this.detail.is_open_sande && !this.detail.is_open_lianlian) ||
					this.forceDisabled);
			},
			isGLB(){
				return this.detail.goods_image.split('.').pop().toLowerCase() == 'glb' ? true : false
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.requestData();
		},
		onPullDownRefresh(e) {
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			let params = app.getShareUrlParams({
				'id': this.id
			});
			return {
				title: this.detail.goods_name,
				path: "/pages/market/detail/detail?" + params
			};
		},
		methods: {
			requestData: function(callback) {
				app._get('ordersale/saleOrderDetail', {
					id: this.id,
				}, (res) => {
					this.detail = res.data;
					app.configJweixin({
						title: res.data.goods_name,
						desc: '发现一款超赞的数字藏品，快来看看！',
						imgUrl: res.data.goods_image
					});
					try {
						this.nft_intro = this.escape2Html(res.data.nft_intro);
						this.publisher_detail = this.escape2Html(res.data.publisher_detail);
					} catch (e) {

					}
				}, null, () => {
					callback && callback();
				})
			},
			/**
			 * 显示分享选项
			 */
			onClickShare(e) {
				this.shareActionsheetVisible = true
			},

			// 点击购买
			onPurchase: function() {
				this.forceDisabled = true;
				uni.navigateTo({
					url: `../checkout/checkout?id=${this.id}`,
					complete: () => {
						setTimeout(() => {
							this.forceDisabled = false;
						}, 3000);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/utils/assets.scss';
	.flex {
		display: flex;
	}
	.collection-info {
		.dis-flex {
			border-bottom: 1px solid #f6f6f6;
			padding-bottom: 20rpx;
		}
	}
	.header .media-img-wrapper {
		width: 464rpx;
		height: 464rpx;
		border-radius: 30rpx;
		overflow: hidden;
	}
	.header .media {
		background-color: #fff;
		padding: 10rpx;
		border-radius: 30rpx;
		box-shadow: 0 2px 30px rgba(0,0,0, 0.3);
	}
	.header .media-img-wrapper image {
		width: 100%;
		height: 100%;
	}

	.content {
		background: $uni-goods-content-bg-color;
		border-radius: 20px 20px 0 0;
		padding: 90rpx 40rpx 40rpx;
		margin-top: -20px;
		position: relative;
		.title-box {
			border-radius: 36rpx;
			min-height: 300rpx;
			background: linear-gradient(270deg, #1a1a1a, #666);
			position: absolute;
			top: -160rpx;
			width: 670rpx;
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 110rpx;
				padding: 0 20rpx 0 30rpx;
				.price {
					display: inline-block;
					font-style: normal;
					font-weight: 500;
					font-size: 40rpx;
					letter-spacing: 1.12rpx;
					color: #fff;
					span {
						font-weight: 700;
						font-size: 56rpx;
						line-height: 56rpx;
					}
				}
			}
		
			.bottom {
				box-sizing: border-box;
				position: relative;
				display: block;
				width: 100%;
				min-height: 190rpx;
				padding: 40rpx 30rpx 0;
				border-radius: 36rpx;
				border: 1px solid #ddd;
				background: #fff;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: -30rpx;
					width: 690rpx;
					height: 156rpx;
					background: url('@/static/images/other_bg.png') no-repeat;
					background-size: 100% 100%;
					z-index: -1;
				}
		
				.title {
					margin-bottom: 15rpx;
					font-style: normal;
					font-weight: 700;
					font-size: 40rpx;
					line-height: 47rpx;
					letter-spacing: 1.18rpx;
					color: #000;
					flex: 1;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
		
				.tag-box {
					font-style: normal;
					font-weight: 700;
					font-size: 24rpx;
					line-height: 34rpx;
					letter-spacing: 1rpx;
					margin-bottom: 22rpx;
					padding-right: 8rpx;
					margin-right: 20rpx;
					color: #b47528;
					background: rgba(240, 213, 182, .24);
					border-radius: 4rpx;
					.tag-title {
						display: inline-block;
						height: 100%;
						background: linear-gradient(74.33deg, #ffad8d 7%, #ffbf75 86.31%);
						padding: 0 8rpx;
						margin-right: 1rpx;
						border-radius: 4rpx 0 0 4rpx;
						color: #441c02;
					}
		
					.tag-num {
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.content .component-title {
		font-size: 32rpx;
		color: $uni-goods-content-color-comp-title;
		font-weight: bold;
	}

	.content .component-content {
		// background-color: $uni-goods-content-bg-color-comp;
		margin-top: 40rpx;
		padding: 30rpx;
		border-radius: 30rpx;
		border: 1px solid #eee;
	}

	.content .content-component:nth-child(n+2) {
		margin-top: 70rpx;
	}
	/* 发行放 持有者 */
	.introduction {
		display: flex;
		.introduction-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 336rpx;
			height: 192rpx;
			padding: 40rpx 20rpx 24rpx 30rpx;
			box-sizing: border-box;
			border-radius: 36rpx;
			border: 1px solid #ddd;
			margin-left: 16rpx;
			&:first-child {
				margin-left: 0;
			}
			.title {
				display: block;
				height: 30rpx;
				font-style: normal;
				font-weight: 700;
				font-size: 30rpx;
				line-height: 30rpx;
				letter-spacing: 1.17647rpx;
				color: #000;
			}
	
			.info {
				display: flex;
				font-size: 24rpx;
				line-height: 64rpx;
	
				.info-name {
					flex: 1;
					margin-left: 16rpx;
				}
	
				.info-img {
					width: 64rpx;
					height: 64rpx;
				}
			}
		}
	}
	.content .owner__avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.content .owner__avatar image {
		width: 100%;
		height: 100%;
	}

	.content .content-key {
		width: 170rpx;
		flex-shrink: 0;
	}

	.perfect-tips-placeholder {
		height: 100rpx;
	}

	.perfect-tips-container {
		width: 100%;
		height: 100rpx;
		//background: #1c1c1c;
		padding: 0 20rpx;
		border-bottom: 1px solid #f6f6f6;
		box-sizing: border-box;
	}

	.perfect-tips .perfect-tips__title text {
		color: #FF4400;
	}

	.perfect-tips .btn-perfect text {
		color: $uni-text-color-active;
	}

	/* 底部操作栏 */
	.footer-fixed {
		// background-color: #1c1c1c;
		height: auto;
		display: inherit;
	}

	.footer-fixed-container {
		width: 100%;
		height: 120rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.footer-fixed .btn-purchase {
		flex:1;
		min-width: 210rpx;
		max-width: 320rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: linear-gradient(270deg,#1a1a1a,#666);
		padding: 0 30rpx;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.footer-fixed .btn-purchase[disabled] {
		background: $uni-btn-bg-color-disabled;
		color: $uni-btn-color-disabled;
	}
	.col-f{
		color: #000;
	}
</style>
